<template>
    <a-range-picker v-model:value="rangeDates" v-bind="$attrs" @change="handleDateChange" />
</template>

<script lang="ts">
import { defineComponent, ref, unref, watch, getCurrentInstance } from 'vue';
export default defineComponent({
    emits: ['change'],
    props: {
        value: {
            type: Array,
            default: () => []
        }
    },
    setup(props, { emit }) {
        const instance: any = getCurrentInstance();
        const rangeDates = ref<any[]>([]);
        const handleDateChange = (val) => {
            const [startTime, endTime] = val;
            emit('change', {
                startTime: startTime ? instance.proxy.$moment(startTime).set({ hour: '00', minute: '00', second: '00' }).format('YYYY-MM-DD HH:mm:ss') : null,
                endTime: endTime ? instance.proxy.$moment(endTime).set({ hour: '23', minute: '59', second: '59' }).format('YYYY-MM-DD HH:mm:ss') : null
            });
        };
        watch(
            () => props.value,
            () => {
                rangeDates.value = props.value;
            }
        );
        return {
            rangeDates,
            handleDateChange
        };
    }
});
</script>

<style scoped>
</style>